<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.energyblue.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.bootstrap.css" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcheckbox.js"></script>

<form class="form-horizontal well">
    <fieldset>
        <legend>Registro Rúbrica</legend>
        <div id="mensajeControl" style="display: none">
            <button type="button" class="close" data-dismiss="alert">×</button>
        </div>
        <h5>1. Información Rúbrica </h5>
        <div class="row-fluid">
            <div class="control-group">
                <label class="control-label">Nombre Rúbrica</label>
                <div class="controls"><textarea class="input-xxlarge" id="nombreRubrica" rows="2"></textarea></div>
            </div>
            <div class="control-group">
                <label class="control-label">Descripción</label>
                <div class="controls"><textarea class="input-xxlarge" id="descripcionRubrica" rows="3"></textarea></div>
            </div>
            <div class="control-group">
                <label class="control-label">Tipo Nivel</label>
                <div class="controls">
                    <select data-placeholder="Seleccionar..." id="tiponiveles" class="chosen-select">
                        <option value=""></option>
                        <?php foreach ($tiponiveles as $tiponivel) { ?>
                            <option value=<?php echo $tiponivel['idTiponivel']; ?> > <?php echo $tiponivel['nombre']; ?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            
        </div>

        <h5>2. Detalle Rúbrica </h5>
        <div class="span1"></div>
        <div class="span6" id='jqxTree'>

        </div>
        <div class="span5">

            <div class="control-group">
                <a class="btn btn-info" id="AddResultado" disabled><i class="icon-plus"></i> Resultado </a>
                <input type="text" id="btnResultado" value="0" style='display:none'>
                <a class="btn btn-info" id="AddAspecto" disabled><i class="icon-plus" ></i> Aspecto</a>
                <input type="text" id="btnAspecto" value="0" style='display:none'>
                <a class="btn btn-info" id="AddCriterio" disabled><i class="icon-plus"></i> Criterio</a>
                <input type="text" id="btnCriterio" value="0" style='display:none'>
                <a class="btn btn-danger" id="Remove"><i class="icon-minus"></i> Eliminar</a>
            </div>
<!--            <div class="control-group">
                <a class="btn btn-info" id="ExpandAll"><i class="icon-resize-full"></i> Expandir</a>
                <a class="btn btn-info" id="CollapseAll"><i class="icon-resize-small"></i> Comprimir</a>
            </div>-->

            <div class="control-group" id="formularioRubrica">

            </div>
            <div class="control-group">
                <a class="btn btn-primary" onclick="registrar();" >Registrar</a>
                <a class="btn btn-primary" onclick="atras_registrar_rubrica();" >Atrás</a>
            </div>
            
        </div>

    </fieldset>
</form>

<script type="text/javascript">
    
    var elementosArray = [];
    
    $("#tiponiveles").change(function() {
        
        console.log($("#tiponiveles").val());
        var idTiponivel = $("#tiponiveles").val();

        if (idTiponivel !== "") {
            $("#AddResultado").removeAttr("disabled");
            $("#btnResultado").val("1");
        }
        else {
            $("#AddResultado").attr("disabled", "disabled");
            $("#btnResultado").val("0");
        }
    });
    
    function activarFormulario(id) {
        var nivel = $('#'+id).parents('ul').length;

        if (nivel === 1 ) {
            $("#AddAspecto").removeAttr("disabled");
            $("#btnAspecto").val("1");
            $("#AddCriterio").attr("disabled", "disabled");
            $("#btnCriterio").val("0");
        }
        else if (nivel === 2 ) {
            $("#AddAspecto").attr("disabled", "disabled");
            $("#btnAspecto").val("0");
            $("#AddCriterio").removeAttr("disabled");
            $("#btnCriterio").val("1");
        }
        else if (nivel === 3 ) {
            $("#AddAspecto").attr("disabled", "disabled");
            $("#btnAspecto").val("0");
            $("#AddCriterio").attr("disabled", "disabled");
            $("#btnCriterio").val("0");
        }

        $.each(elementosArray, function() {
            $("#div_"+this).hide();
        });

        $("#div_" + id).show();
    }
    
    $(document).ready(function() {
       
        $(".chosen-select").chosen({no_results_text: "No hay coincidencias con"});
        $(".chosen-select-deselect").chosen({allow_single_deselect: true});
       
        var theme = 'bootstrap';
        // Create jqxTree
        $('#jqxTree').jqxTree({height: '600px', width: '400px', theme: theme});
        $('#jqxTree').jqxTree('expandAll');
        
        //Add Resultado        
        $('#AddResultado').click(function () {
            if ($('#btnResultado').val() === "1") {
                var pass = password(8);
                $('#jqxTree').jqxTree('addTo', { class:'Resultado', id:pass+"_id", label: 'Resultado' }, null, false, "id="+pass+" onclick=activarFormulario('"+pass+"');");
                elementosArray.push(pass);
                // update the tree.
                $('#jqxTree').jqxTree('selectItem', $("#"+pass+"_id")[0]);
                $('#jqxTree').jqxTree('render');

                $.each(elementosArray, function() {
                    $("#div_"+this).hide();
                });
                
                $("#AddAspecto").removeAttr("disabled");
                $("#btnAspecto").val("1");
                $("#AddCriterio").attr("disabled", "disabled");
                $("#btnCriterio").val("0");
                $("#AddNivel").attr("disabled", "disabled");
                $("#btnNivel").val("0");
                
                var formulario = "<div id='div_"+pass+"'>"+
                                    "<strong><font color='#0061cc'>Resultado:</font></strong>"+
                                    "<label></label>"+
                                    "<label></label>"+
                                    "<label>Nombre Corto</label>"+
                                    "<input class='span11' type='text' id='"+pass+"_input1' onfocusout=update('"+pass+"_input1'); onkeypress='return validar_textoMayuscula_numeros(event);' maxlength='8'>"+
                                    "<label>Descripción</label>"+
                                    "<textarea class='span11' rows='14' id='"+pass+"_input2' onkeypress='return validar_texto_numeros_separado(event);' maxlength='400'></textarea>"+
                                "</div>";
                $('#formularioRubrica').append(formulario);
            }
        });

        //AddAspecto
        $('#AddAspecto').click(function () {
            
            if ($('#btnAspecto').val() === "1") {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                var pass = password(8);
                if (selectedItem !== null) {
                    $('#jqxTree').jqxTree('addTo', { id:pass+"_id", label: 'Aspecto' }, selectedItem.element, false, "id="+pass+" onclick=activarFormulario('"+pass+"');");
                    $('#jqxTree').jqxTree('expandItem', selectedItem.element);
                    $('#jqxTree').jqxTree('selectItem', $("#"+pass+"_id")[0]);
                    $('#jqxTree').jqxTree('ensureVisible', selectedItem.element);
                    $('#jqxTree').jqxTree('render');

                    var nivel = $("#"+pass+"_id").parents('ul').length;
                
                    elementosArray.push(pass);
                    
                    $.each(elementosArray, function() {
                        $("#div_"+this).hide();
                    });
                
                    if (nivel === 2 ) {

                        $("#AddAspecto").attr("disabled", "disabled");
                        $("#btnAspecto").val("0");
                        $("#AddCriterio").removeAttr("disabled");
                        $("#btnCriterio").val("1");
                        $("#AddNivel").attr("disabled", "disabled");
                        $("#btnNivel").val("0");

                        var formulario = "<div id='div_"+pass+"'>"+
                                            "<strong><font color='#0061cc'>Aspecto:</font></strong>"+
                                            "<label></label>"+
                                            "<label></label>"+
                                            "<label>Nombre Corto</label>"+
                                            "<input class='span11' type='text' id='"+pass+"_input1' onfocusout=update('"+pass+"_input1'); onkeypress='return validar_textoMayuscula_numeros(event);' maxlength='8'>"+
                                            "<label>Descripción</label>"+
                                            "<textarea class='span11' rows='14' id='"+pass+"_input2' onkeypress='return validar_texto_numeros_separado(event);' maxlength='400'></textarea>"+
                                        "</div>";
                        $('#formularioRubrica').append(formulario);
                    }
                }
            }
        });

        //AddCriterio
        $('#AddCriterio').click(function () {
            
            if ($('#btnCriterio').val() === "1") {
            
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                var pass = password(8);
                if (selectedItem !== null) {
                    $('#jqxTree').jqxTree('addTo', { id:pass+"_id", label: 'Criterio' }, selectedItem.element, false, "id="+pass+" onclick=activarFormulario('"+pass+"');");
                    $('#jqxTree').jqxTree('expandItem', selectedItem.element);
                    $('#jqxTree').jqxTree('selectItem', $("#"+pass+"_id")[0]);
                    $('#jqxTree').jqxTree('ensureVisible', selectedItem.element);
                    $('#jqxTree').jqxTree('render');
                    var nivel = $("#"+pass+"_id").parents('ul').length;
                
                    elementosArray.push(pass);
                    
                    $.each(elementosArray, function() {
                        $("#div_"+this).hide();
                    });

                    if (nivel === 3 ) {
                        
                        $("#AddAspecto").attr("disabled", "disabled");
                        $("#btnAspecto").val("0");
                        $("#AddCriterio").attr("disabled", "disabled");
                        $("#btnCriterio").val("0");
                        $("#AddNivel").removeAttr("disabled");
                        $("#btnNivel").val("1");

                        var formulario = "<div id='div_"+pass+"'>"+
                                            "<strong><font color='#0061cc'>Criterio:</font></strong>"+
                                            "<label></label>"+
                                            "<label></label>"+
                                            "<label>Nombre Corto</label>"+
                                            "<input class='span11' type='text' id='"+pass+"_input1' onfocusout=update('"+pass+"_input1'); onkeypress='return validar_textoMayuscula_numeros(event);' maxlength='8'>"+
                                            "<label>Descripción</label>"+
                                            "<textarea class='span11' rows='14' id='"+pass+"_input2' onkeypress='return validar_texto_numeros_separado(event);' maxlength='400'></textarea>"+
                                        "</div>";
                        $('#formularioRubrica').append(formulario);
                        
                        var idTiponivel = $("#tiponiveles").val();
                        
                        var datos = {
                            idTiponivel: idTiponivel
                        };

                        $.ajax({
                            url: "../rubricas/buscar_niveles",
                            type: "POST",
                            data: datos,
                            dataType: 'json',
                            success: function(niveles) {
                                $.each(niveles, function(i, item) {
                                    agregarNivel(item.idNivel, item.nombre, item.valor);
                                });
                                $("#"+pass+"_id").click();
                            }
                        });
                        
                    }
                }
            }
        });
        
        function agregarNivel(idNivel, nombre, valor) {
            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
            var pass = password(8);
            if (selectedItem !== null) {
                $('#jqxTree').jqxTree('addTo', { id:pass+"_id", label: nombre }, selectedItem.element, false, "id="+pass+" onclick=activarFormulario('"+pass+"');");
                $('#jqxTree').jqxTree('expandItem', selectedItem.element);
                $('#jqxTree').jqxTree('render');
                var nivel = $("#"+pass+"_id").parents('ul').length;
                
                elementosArray.push(pass);

                if (nivel === 4 ) {

                    var formulario = "<div id='div_"+pass+"' style='display:none'>"+
                                        "<strong><font color='#0061cc'>Nivel:</font></strong>"+
                                        "<label></label>"+
                                        "<label></label>"+            
                                        "<label>Nombre Corto</label>"+
                                        "<input type='text' style='display:none' id='"+pass+"_input0' value="+ idNivel +" >"+
                                        "<input class='span11' type='text' id='"+pass+"_input1' value="+ nombre +" maxlength='8' disabled>"+
                                        "<label>Valor Nivel</label>"+
                                        "<input class='span11' type='text' id='"+pass+"_input2' value="+ valor +" maxlength='8' disabled>"+
                                        "<label>Descripción</label>"+
                                        "<textarea class='span11' rows='14' id='"+pass+"_input3' onkeypress='return validar_texto_numeros_separado(event);' maxlength='400'></textarea>"+
                                    "</div>";
                    $('#formularioRubrica').append(formulario);
                }
            }
        }
        
        // Remove 
        $('#Remove').click(function() {
            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
            if (selectedItem !== null) {
                // removes the selected item. The last parameter determines whether to refresh the Tree or not.
                // If you want to use the 'removeItem' method in a loop, set the last parameter to false and call the 'render' method after the loop.
//
//                var idTiponivel = $("#tiponiveles").val();
//
//                var datos = {
//                    idTiponivel: idTiponivel
//                };
//
//                $.ajax({
//                    url: "../rubricas/buscar_niveles",
//                    type: "POST",
//                    data: datos,
//                    dataType: 'json',
//                    success: function(niveles) {
//                        $.each(niveles, function(i, item) {
//                            var selectedItem = $("#jqxTree").jqxTree('selectedItem');
//                            var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element);
//                            $("#div_"+nextItem.element.id.substring(0,8)).remove();
//                            $('#jqxTree').jqxTree('selectItem', nextItem.element);
//                            $('#jqxTree').jqxTree('render');
//                        });
//                    }
//                });
//                var selectedItem = $("#jqxTree").jqxTree('selectedItem');
                $('#jqxTree').jqxTree('removeItem', selectedItem.element, false);
                
                $("#div_"+selectedItem.element.id.substring(0,8)).remove();
                
                $('#jqxTree').jqxTree('render');
            }
        });
        
        // Expand All
        $('#ExpandAll').click(function() {
            $('#jqxTree').jqxTree('expandAll');
        });
        
        // Collapse All
        $('#CollapseAll').click(function() {
            $('#jqxTree').jqxTree('collapseAll');
        });
        
        $("#jqxTree").jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
        
    });    
    
</script>